<template>
  <div class="header is-fixed">
    <div class="wrap">
<!--      <a class="wrapnav" href style='color: #fff;font-size: 20px;'>-->
<!--        <img src="@/assets/logo.png" alt />-->
<!--      </a>-->
      <div class="wrapnav" style='color: #fff;font-size: 20px;cursor:pointer;'>
        智慧园区服务平台系统
      </div>

      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        router
        @select="handleSelect"
        background-color="#595959"
        text-color="#fff"
        style='flex: 1;height: 80px;display: flex;align-items: center;padding: 0 80px;border: none'
        active-text-color="#ffd04b">
        <el-menu-item index="/home/index" style='width: 140px;text-align: center'>首页</el-menu-item>
        <el-submenu index="1">
          <template slot="title">{{ navList[1].label }}</template>
          <el-menu-item v-for='(menu1,i) in navList[1].childrens' :key='i' :index="menu1.path">{{ menu1.label }}</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">{{ navList[2].label }}</template>
          <el-menu-item v-for='(menu2,i) in navList[2].childrens' :key='i' :index="menu2.path">{{ menu2.label }}</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">{{ navList[3].label }}</template>
          <el-menu-item v-for='(menu3,i) in navList[3].childrens' :key='i' :index="menu3.path">{{ menu3.label }}</el-menu-item>
        </el-submenu>
        <el-menu-item index="/about/index" style='width: 140px;text-align: center'>关于我们</el-menu-item>
      </el-menu>

      <!--      <ul class="wrapnav navlist">-->
<!--        <li-->
<!--          class="navlistli"-->
<!--          v-for="(item, index) in navList"-->
<!--          :key="index"-->
<!--          :class="{ active: currentPath.indexOf(item.path) > -1 }"-->
<!--          @click="tabchange(item)"-->
<!--        >-->
<!--          <div>-->
<!--            {{ item.label }}-->
<!--            <ul v-if="item.childrens" class="drow">-->
<!--              <li-->
<!--                v-for="(info, index) in item.childrens"-->
<!--                :key="index"-->
<!--                @click.stop="tabchange(info)"-->
<!--                style='background: red'-->
<!--              >{{ info.label }}</li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
      <div v-if="!token" class="wrapnav loginbtn">
        <span @click="gotoLogin">登录</span>/
        <span @click="gotoReg">注册</span>
      </div>
      <div v-else class="wrapnav logininfo">
        <el-dropdown @command="command">
          <span class="el-dropdown-link">
            <el-avatar size="large" :src="circleUrl"></el-avatar>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="userlis">
            <el-dropdown-item command="user" divided>账户管理</el-dropdown-item>
            <el-dropdown-item command="mycompany">我的合同</el-dropdown-item>
            <el-dropdown-item command="list">我的订单</el-dropdown-item>
            <el-dropdown-item command="goout" divided>退出账户</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { getStore, removeStore } from '@/utils/store'
export default {
  name: 'navhead',
  data() {
    return {
      activeIndex:'/home/index',
      currentPath: '/',
      navList: [
        {
          label: '首页',
          route: '',
          id: 0,
          path: '/home/index'
        },
        {
          label: '园区基础服务',
          route: '',
          id: 1,
          childrens: [
            {
              label: '房屋租赁',
              path: '/parkService/houseRent'
            },
            {
              label: '仓储租赁',
              path: '/parkService/index'
            },
            {
              label: '会议室租赁',
              path: '/meetingOrder'
            },
            {
              label: '活动场地租赁',
              path: '/activityOrder'
            },
            {
              label: '缴费',
              path: '/parkService/paycost'
            },
            {
              label: '车辆进出场',
              path: '/parkService/vehicleAccess'
            },
            {
              label: '报事报修',
              path: '/repairList'
            }
          ],
          path: '/parkService'
        },
        {
          label: '园区增值服务',
          route: '',
          id: 2,
          childrens: [
            {
              label: '车辆延保',
              path: '2-1'
            },
            {
              label: '检测代办',
              path: '2-2'
            },
            {
              label: '法律援助',
              path: '2-3'
            },
            {
              label: '商家招聘',
              path: '2-4'
            }
          ],
          path: 'added'
        },
        {
          label: '金融服务',
          route: '',
          id: 3,
          childrens: [
            {
              label: '融资服务',
              path: '3-1'
            },
            {
              label: '投资服务',
              path: '3-2'
            },
            {
              label: '物业贷',
              path: '3-2'
            },
            {
              label: '信用贷',
              path: '3-4'
            },
            {
              label: '小额贷款',
              path: '3-5'
            },
            {
              label: '股权贷',
              path: '3-6'
            },
            {
              label: '经营贷',
              path: '3-7'
            },
            {
              label: '基金',
              path: '3-8'
            }
          ],
          path: 'fin'
        },
        {
          label: '关于我们',
          route: '',
          id: 4,
          path: '/about/index'
        }
      ],
      logininfo: { token: false },
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  mounted() {
    let logininfo = getStore({
      name: 'logininfo'
    })
    if (logininfo) {
      this.logininfo = logininfo
    }
    const navPath=window.sessionStorage.getItem('navPath')
    if(navPath){
      this.activeIndex=navPath
    }
  },
  computed: {
    token() {
      return this.logininfo.token
    }
  },
  methods: {
    handleSelect(keyPath) {
      window.sessionStorage.setItem('navPath',keyPath)
    },
    tabchange(data) {
      if (data.childrens && data.childrens.length > 0) {
        return
      }
      this.currentPath = data.path
      this.$router.push({ path: data.path })
    },
    gotoLogin() {
      this.$router.push({ path: '/login' })
    },
    gotoReg() {
      this.$router.push({ path: '/reg' })
    },
    command(item) {
      if (item === 'goout') {
        removeStore({
          name: 'logininfo'
        })
        this.$store.commit('Setuser',null)
        this.$router.push({ path: '/login' })
        window.localStorage.clear()
        window.sessionStorage.clear()
      }
      if (item === 'user') {
        this.$router.push({ path: '/userHomes' })
      }
      if (item === 'list') {
        this.$router.push({ path: '/order' })//mycompany
      }
      if (item === 'mycompany') {
        this.$router.push({ path: '/myContract' })//mycompany
      }
    }
  },

  watch: {
    $route: {
      immediate: true,
      handler: function (newVal) {
        this.currentPath = newVal.path
      }
    }
  }
}
</script>
